@import (reference) "../../normal.less";

.award-rule {
  position: fixed;
  z-index: 8;
  @f11();
  .mask();
  .panel {
    width: 621rpx;
    height: 992rpx;
    animation: fadeInRight 0.3s linear forwards;
    .center(621rpx,992rpx);
    .bg {
      @fill();
    }
    .rich-text {
      width: 400rpx;
      height: 478rpx;
      position: absolute;
      z-index: 1;
      left: 105rpx;
      top: 205rpx;
      line-height: 30rpx;
      color: #8e545c;
      font-weight: 600;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24rpx;
      word-wrap: break-word;
      display: flex;
    }
  }

  .state {
    font-size: 22rpx;
    font-weight: 400;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5em 1em;
    @keyframes fadeInBottom {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(100%);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0%);
      }
    }
    animation: fadeInBottom 2s linear forwards;
    position: absolute;
    top: 1350rpx;
    left: 50%;
    border-radius: 22rpx;
  }
}
